CSS वापरून टेक्स्ट सिलेक्शन हायलाइटचा रंग आणि स्वरूप कसे बदलायचे ते शिका, ज्यामुळे विविध ब्राउझर आणि प्लॅटफॉर्मवर वापरकर्त्याचा अनुभव आणि ब्रँडची सुसंगतता सुधारते.
CSS कस्टम हायलाइट: टेक्स्ट सिलेक्शन स्टाइलिंगवर प्रभुत्व मिळवा
टेक्स्ट सिलेक्शन, वेबपेजवरील शब्दांवरून कर्सर फिरवण्याची ही एक साधी क्रिया आहे, ज्याकडे डिझाइन आणि ब्रँडिंगच्या बाबतीत अनेकदा दुर्लक्ष केले जाते. तथापि, डीफॉल्ट ब्राउझर हायलाइट रंग बदलल्याने वापरकर्त्याचा अनुभव लक्षणीयरीत्या वाढू शकतो आणि तुमची ब्रँड ओळख अधिक मजबूत होऊ शकते. हे सर्वसमावेशक मार्गदर्शक तुम्हाला CSS कस्टम हायलाइटबद्दल सर्व काही शिकवेल, ज्यामध्ये ::selection स्यूडो-एलिमेंट, ब्राउझर कंपॅटिबिलिटी, ऍक्सेसिबिलिटी विचार आणि तुमच्या वेबसाइटचे डिझाइन सुधारण्यासाठी व्यावहारिक उदाहरणे समाविष्ट आहेत.
टेक्स्ट सिलेक्शन हायलाइट्स कस्टमाइझ का करावे?
जरी डीफॉल्ट ब्राउझर हायलाइट रंग (सहसा निळा) कार्यक्षम असला तरी, तो तुमच्या वेबसाइटच्या कलर स्कीम किंवा ब्रँडच्या सौंदर्याशी जुळेलच असे नाही. हायलाइट रंग कस्टमाइझ करण्याचे अनेक फायदे आहेत:
- ब्रँड सुसंगतता: सिलेक्शन हायलाइट तुमच्या ब्रँडच्या रंगांना पूरक असल्याची खात्री करा, ज्यामुळे एक सुसंगत व्हिज्युअल अनुभव तयार होतो.
- सुधारित वापरकर्ता अनुभव: योग्यरित्या निवडलेला हायलाइट रंग वाचनीयता सुधारू शकतो आणि डोळ्यांवरील ताण कमी करू शकतो, विशेषतः दृष्टीदोष असलेल्या वापरकर्त्यांसाठी.
- वाढीव व्हिज्युअल अपील: एक कस्टम हायलाइट तुमच्या वेबसाइटच्या डिझाइनमध्ये सूक्ष्मता आणि व्यावसायिकतेचा स्पर्श जोडू शकतो.
- वाढीव एंगेजमेंट: जरी लहान वाटत असले तरी, व्हिज्युअल तपशील एकूण वापरकर्ता एंगेजमेंट आणि समाधानामध्ये योगदान देतात.
::selection स्यूडो-एलिमेंट
::selection स्यूडो-एलिमेंट हे CSS सह टेक्स्ट सिलेक्शन हायलाइट्स कस्टमाइझ करण्याची गुरुकिल्ली आहे. हे तुम्हाला निवडलेल्या टेक्स्टचा बॅकग्राउंड रंग आणि टेक्स्टचा रंग स्टाइल करण्याची परवानगी देते. लक्षात घ्या की तुम्ही या स्यूडो-एलिमेंटचा वापर करून फॉन्ट-साईज, फॉन्ट-वेट किंवा टेक्स्ट-डेकोरेशन यांसारख्या इतर प्रॉपर्टीज स्टाइल करू शकत नाही.
मूलभूत सिंटॅक्स
मूलभूत सिंटॅक्स अगदी सोपा आहे:
::selection {
background-color: color;
color: color;
}
color ला तुमच्या इच्छित रंग मूल्यांनी (उदा. हेक्साडेसिमल, RGB, HSL, किंवा नावाचे रंग) बदला.
उदाहरण
येथे एक सोपे उदाहरण आहे जे टेक्स्ट निवडल्यावर बॅकग्राउंड रंग हलका निळा आणि टेक्स्टचा रंग पांढरा सेट करते:
::selection {
background-color: #ADD8E6; /* हलका निळा */
color: white;
}
कस्टम हायलाइट लागू करण्यासाठी हा CSS नियम तुमच्या स्टाइलशीटमध्ये किंवा <style> टॅगमध्ये जोडा.
ब्राउझर कंपॅटिबिलिटी: प्रीफिक्सेसचा वापर
जरी ::selection आधुनिक ब्राउझरद्वारे मोठ्या प्रमाणावर समर्थित असले तरी, जुन्या आवृत्त्यांना व्हेंडर प्रीफिक्सेसची आवश्यकता असू शकते. जास्तीत जास्त कंपॅटिबिलिटी सुनिश्चित करण्यासाठी, -moz-selection आणि -webkit-selection प्रीफिक्सेस समाविष्ट करणे ही एक चांगली पद्धत आहे.
प्रीफिक्सेससह अद्यतनित सिंटॅक्स
व्हेंडर प्रीफिक्सेस समाविष्ट करण्यासाठी येथे अद्यतनित सिंटॅक्स आहे:
::-moz-selection {
background-color: #ADD8E6;
color: white;
}
::selection {
background-color: #ADD8E6;
color: white;
}
::-webkit-selection {
background-color: #ADD8E6;
color: white;
}
हे सुनिश्चित करते की तुमचा कस्टम हायलाइट विविध प्रकारच्या ब्राउझरवर कार्य करतो, ज्यात Firefox (-moz-selection) आणि Safari/Chrome (-webkit-selection) च्या जुन्या आवृत्त्यांचा समावेश आहे.
ऍक्सेसिबिलिटी विचार
टेक्स्ट सिलेक्शन हायलाइट्स कस्टमाइझ करताना, ऍक्सेसिबिलिटीला प्राधान्य देणे महत्त्वाचे आहे. चुकीच्या रंगांच्या निवडीमुळे दृष्टीदोष असलेल्या वापरकर्त्यांना निवडलेला टेक्स्ट वाचणे कठीण होऊ शकते. येथे काही महत्त्वाचे विचार आहेत:
- कॉन्ट्रास्ट रेशो: सिलेक्शन हायलाइटच्या बॅकग्राउंड रंग आणि टेक्स्टच्या रंगात पुरेसा कॉन्ट्रास्ट असल्याची खात्री करा. WCAG (वेब कंटेंट ऍक्सेसिबिलिटी गाइडलाइन्स) सामान्य टेक्स्टसाठी किमान 4.5:1 आणि मोठ्या टेक्स्टसाठी 3:1 चा कॉन्ट्रास्ट रेशो सुचवते.
- रंग अंधत्व: हायलाइट रंग निवडताना रंग अंधत्वाचा विचार करा. वेगवेगळ्या प्रकारच्या रंग दृष्टीदोष असलेल्या लोकांसाठी ओळखण्यास कठीण असलेल्या रंगांचे संयोजन टाळा. WebAIM चे कलर कॉन्ट्रास्ट चेकर (https://webaim.org/resources/contrastchecker/) सारखी साधने तुम्हाला रंगांचे संयोजन तपासण्यात मदत करू शकतात.
- वापरकर्त्याची पसंती: वापरकर्त्यांना त्यांच्या गरजेनुसार आणि पसंतीनुसार हायलाइट रंग बदलण्याची परवानगी देण्याचा विचार करा. हे वापरकर्ता सेटिंग्ज किंवा ब्राउझर एक्स्टेंशनद्वारे साध्य केले जाऊ शकते.
उदाहरण: ऍक्सेसिबल रंगांचे संयोजन
येथे उच्च कॉन्ट्रास्ट रेशो असलेले ऍक्सेसिबल रंगांच्या संयोजनाचे एक उदाहरण आहे:
::selection {
background-color: #2E8B57; /* सी ग्रीन */
color: #FFFFFF; /* पांढरा */
}
हे संयोजन एक मजबूत कॉन्ट्रास्ट प्रदान करते, ज्यामुळे वापरकर्त्यांना निवडलेला टेक्स्ट वाचणे सोपे होते.
प्रगत कस्टमायझेशन तंत्र
मूलभूत रंग बदलांपलीकडे, तुम्ही CSS व्हेरिएबल्स आणि इतर तंत्रांचा वापर करून अधिक अत्याधुनिक आणि डायनॅमिक टेक्स्ट सिलेक्शन हायलाइट्स तयार करू शकता.
CSS व्हेरिएबल्सचा वापर
CSS व्हेरिएबल्स (ज्यांना कस्टम प्रॉपर्टीज म्हणूनही ओळखले जाते) तुम्हाला पुन्हा वापरता येणारी मूल्ये परिभाषित करण्याची परवानगी देतात जी सहजपणे अपडेट केली जाऊ शकतात. तुमच्या वेबसाइटच्या डिझाइनमध्ये सुसंगतता राखण्यासाठी हे विशेषतः उपयुक्त आहे.
CSS व्हेरिएबल्स परिभाषित करणे
तुमचे CSS व्हेरिएबल्स :root स्यूडो-क्लासमध्ये परिभाषित करा:
:root {
--highlight-background: #FFD700; /* सोनेरी */
--highlight-text: #000000; /* काळा */
}
::selection मध्ये CSS व्हेरिएबल्सचा वापर
तुमच्या ::selection नियमामध्ये CSS व्हेरिएबल्सचा संदर्भ देण्यासाठी var() फंक्शन वापरा:
::selection {
background-color: var(--highlight-background);
color: var(--highlight-text);
}
आता, तुम्ही :root स्यूडो-क्लासमधील CSS व्हेरिएबल्स अपडेट करून सहजपणे हायलाइट रंग बदलू शकता.
संदर्भानुसार डायनॅमिक हायलाइट रंग
तुम्ही निवडलेल्या टेक्स्टच्या संदर्भानुसार डायनॅमिक हायलाइट रंग तयार करू शकता. उदाहरणार्थ, तुम्हाला हेडिंगसाठी बॉडी टेक्स्टपेक्षा वेगळा हायलाइट रंग वापरायचा असेल. हे जावास्क्रिप्ट आणि CSS व्हेरिएबल्स वापरून साध्य केले जाऊ शकते.
उदाहरण: वेगळे हायलाइट्स
प्रथम, वेगवेगळ्या हायलाइट रंगांसाठी CSS व्हेरिएबल्स परिभाषित करा:
:root {
--heading-highlight-background: #87CEEB; /* स्काय ब्लू */
--heading-highlight-text: #FFFFFF; /* पांढरा */
--body-highlight-background: #FFFFE0; /* हलका पिवळा */
--body-highlight-text: #000000; /* काळा */
}
नंतर, निवडलेल्या टेक्स्टच्या पॅरेंट एलिमेंटमध्ये क्लास जोडण्यासाठी जावास्क्रिप्ट वापरा:
// हे एक सरळ उदाहरण आहे आणि वेगवेगळ्या सिलेक्शन परिस्थिती अचूकपणे हाताळण्यासाठी
// अधिक मजबूत अंमलबजावणीची आवश्यकता आहे.
document.addEventListener('mouseup', function(event) {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const parentElement = range.commonAncestorContainer.parentNode;
if (parentElement.tagName === 'H1' || parentElement.tagName === 'H2' || parentElement.tagName === 'H3') {
parentElement.classList.add('heading-selected');
} else {
parentElement.classList.remove('heading-selected');
}
}
});
शेवटी, वेगवेगळ्या क्लासेससाठी CSS नियम परिभाषित करा:
.heading-selected::selection {
background-color: var(--heading-highlight-background);
color: var(--heading-highlight-text);
}
::selection {
background-color: var(--body-highlight-background);
color: var(--body-highlight-text);
}
हे उदाहरण दाखवते की तुम्ही निवडलेल्या संदर्भानुसार हेडिंग आणि बॉडी टेक्स्टसाठी वेगवेगळे हायलाइट रंग कसे तयार करू शकता. अधिक व्यापक अंमलबजावणीसाठी जावास्क्रिप्टसह विविध सिलेक्शन परिस्थिती आणि एज केसेस हाताळण्याची आवश्यकता असेल.
व्यावहारिक उदाहरणे आणि उपयोग
तुमच्या स्वतःच्या कस्टम हायलाइट डिझाइनसाठी प्रेरणा देण्यासाठी येथे काही व्यावहारिक उदाहरणे आणि उपयोग आहेत:
- मिनिमलिस्ट डिझाइन: स्वच्छ आणि आधुनिक लूक कायम ठेवण्यासाठी हायलाइटसाठी एक सूक्ष्म, डिसॅचुरेटेड रंग वापरा. उदाहरणार्थ, हलका राखाडी किंवा बेज.
- डार्क थीम: डार्क थीमसाठी डीफॉल्ट रंग उलटा, हायलाइटसाठी गडद बॅकग्राउंड आणि हलका टेक्स्ट वापरा. हे कमी प्रकाशाच्या वातावरणात वाचनीयता सुधारते.
- ब्रँडिंग मजबुतीकरण: ब्रँड ओळख मजबूत करण्यासाठी हायलाइटसाठी तुमच्या ब्रँडचा प्राथमिक किंवा दुय्यम रंग वापरा.
- इंटरएक्टिव्ह ट्युटोरियल्स: वापरकर्त्यांना पायऱ्यांमधून मार्गदर्शन करण्यासाठी इंटरएक्टिव्ह ट्युटोरियल्समध्ये हायलाइटसाठी एक चमकदार, लक्षवेधी रंग वापरा. उदाहरणार्थ, एक व्हायब्रंट पिवळा किंवा नारंगी.
- कोड हायलाइटिंग: वाचनीयता सुधारण्यासाठी आणि कोडच्या वेगवेगळ्या घटकांमध्ये फरक करण्यासाठी कोड स्निपेट्ससाठी हायलाइट रंग कस्टमाइझ करा.
उदाहरण: कस्टम हायलाइटसह कोड हायलाइटिंग
कोड हायलाइटिंगसाठी, एक सूक्ष्म परंतु वेगळा रंग वाचनीयता सुधारू शकतो:
pre ::selection {
background-color: rgba(255, 255, 0, 0.2); /* पारदर्शकतेसह हलका पिवळा */
color: #000000; /* काळा */
}
हे उदाहरण निवडलेला कोड हायलाइट करण्यासाठी अर्ध-पारदर्शक हलका पिवळा वापरते, ज्यामुळे तो जास्त विचलित न करता सहज ओळखता येतो.
टाळण्यासारख्या सामान्य चुका
टेक्स्ट सिलेक्शन हायलाइट्स कस्टमाइझ करताना टाळण्यासारख्या काही सामान्य चुका येथे आहेत:
- ऍक्सेसिबिलिटीकडे दुर्लक्ष करणे: बॅकग्राउंड आणि टेक्स्ट रंगांमध्ये पुरेसा कॉन्ट्रास्ट सुनिश्चित करण्यात अयशस्वी होणे.
- अतिशय तेजस्वी किंवा विचलित करणारे रंग: खूप तेजस्वी किंवा विचलित करणारे रंग वापरणे, ज्यामुळे डोळ्यांवर ताण येऊ शकतो आणि वाचनीयता कमी होऊ शकते.
- असंगत स्टाइलिंग: तुमच्या वेबसाइटच्या वेगवेगळ्या भागांमध्ये वेगवेगळे हायलाइट स्टाइल्स लागू करणे, ज्यामुळे एक विसंगत वापरकर्ता अनुभव तयार होतो.
- व्हेंडर प्रीफिक्सेस विसरणे: जुन्या ब्राउझरसाठी व्हेंडर प्रीफिक्सेस समाविष्ट करण्यास विसरणे.
- कस्टम हायलाइट्सचा अतिवापर: फक्त जिथे वापरकर्त्याचा अनुभव वाढतो तिथेच कस्टम हायलाइट्स वापरा. त्यांचा अतिवापर केल्याने साइट गोंधळलेली किंवा विचलित करणारी दिसू शकते.
निष्कर्ष
CSS सह टेक्स्ट सिलेक्शन हायलाइट्स कस्टमाइझ करणे हा वापरकर्त्याचा अनुभव वाढवण्याचा आणि तुमची ब्रँड ओळख मजबूत करण्याचा एक सोपा परंतु प्रभावी मार्ग आहे. ::selection स्यूडो-एलिमेंट समजून घेऊन, ब्राउझर कंपॅटिबिलिटीचे निराकरण करून आणि ऍक्सेसिबिलिटीला प्राधान्य देऊन, तुम्ही दृष्यदृष्ट्या आकर्षक आणि वापरकर्ता-अनुकूल वेबसाइट्स तयार करू शकता. तुमच्या ब्रँडसाठी परिपूर्ण हायलाइट स्टाइल शोधण्यासाठी वेगवेगळ्या रंगांच्या संयोजनांसह आणि तंत्रांसह प्रयोग करा.
सुसंगत परिणाम सुनिश्चित करण्यासाठी तुमचे कस्टम हायलाइट्स नेहमी वेगवेगळ्या ब्राउझर आणि डिव्हाइसेसवर तपासा. या अनेकदा दुर्लक्षित तपशिलाकडे लक्ष देऊन, तुम्ही तुमच्या वेबसाइटचे डिझाइन सुधारू शकता आणि तुमच्या वापरकर्त्यांसाठी अधिक आकर्षक अनुभव तयार करू शकता.